<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>SpringBoot-ws</title>
  <script src="${pageContext.request.contextPath}/Resource/reconnecting-websocket.js" type="text/javascript" charset="utf-8"></script>
  <!--    <script src="../js/sockjs.min.js" type="text/javascript" charset="utf-8"></script>-->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/Resource/layui/css/layui.css">
  <script type="text/javascript" src="${pageContext.request.contextPath}/Resource/layui/layui.all.js"></script>
  <script src="${pageContext.request.contextPath}/Resource/layui/lay/modules/layer.js"></script>
  <script src="${pageContext.request.contextPath}/Resource/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
  <style>
    #reply{
      display: none;
    }
  </style>
</head>
<body>
<!-- 聊天窗口弹出层 -->
<div id="reply" style="margin-left: 7px;margin-top: 5px">
  <div id="index" style="width: 573px;height: 330px;overflow-y:auto;border: 1px solid grey;border-bottom: none;padding-left: 10px"></div>
  <div class="msg">
    <textarea id="send_content" placeholder="在此输入消息..." style="width: 583px;height: 65px"></textarea>
  </div>
  <div class="ibtn c" style="float: right;margin-right: 10px">
    <button onclick="sendMessage()" class="layui-btn layui-btn-xs layui-btn-primary">发送消息</button>
  </div>
</div>
<div style="width: 100%;height: 70px;background:rgb(27,107,188);line-height: 70px">
  <span style="color: azure;font-size:30px;margin-left: 30px">欢迎咨询</span>&nbsp;&nbsp;<span style="color: azure;font-size:22px">Consulting</span>
</div>
<br/><br/>
<div style="margin-left: 30px">
  <span style="font-size:20px;font-weight: bold">方式一 客服热线：400-700-9665</span><br/><br/>
  <span style="color:grey">【工作日9:00-20:00】【工作日9:00-20:00；非工作日9:00-18:00】</span>
</div>
<br/><br/>
<div style="margin-left: 30px">
  <span style="font-size:20px;font-weight: bold">方式二 在线客服：<span onclick="Runreply()">[点击此处]</span></span>
</div>
<br/><br/>
<span  style="margin-left: 30px;color: slategray">*非工作时间您可以通过客服热线进行留言，或通过APP的意见反馈进行留言，我们会在工作时间主动与您联系并解决。</span>

<script type="text/javascript">
  document.getElementById('send_content').focus();
  var flag = 1;
  var websocket = null;

  //关闭websocket
  function closeWebsocket() {
    //3代表已经关闭
    if (3 != websocket.readyState) {
      websocket.close();
    } else {
      alert("websocket之前已经关闭");
    }
  }

  // 开启websocket
  // function openWebsocket() {
  //   username = "游客";
  //   if (username != "") {
  //
  //     //当前浏览前是否支持websocket
  //     if ("WebSocket" in window) {
  //       websocket = new ReconnectingWebSocket("ws://localhost:8080/send/" + username);
  //       websocket.reconnectInterval = 8000 //每8s进行一次重连，默认是每秒
  //     } else if ('MozWebSocket' in window) {
  //       websocket = new MozWebSocket("ws://localhost:8080/send/" + username);
  //
  //     } else {
  //       //低版本
  //       websocket = new SockJS("http://localhost:8080/sockjs/send/" + username);
  //     }
  //   }
  //
  //   websocket.onopen = function (event) {
  //     setMessage("打开连接");
  //   }
  //
  //   websocket.onclose = function (event) {
  //     setMessage("关闭连接");
  //   }
  //
  //   websocket.onmessage = function (event) {
  //     // setMessage(event.data);
  //     setMessageTxt(event.data)
  //
  //   }
  //
  //   websocket.onerror = function (event) {
  //     setMessage("连接异常，正在重连中...");
  //   }
  //
  //   //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  //   window.onbeforeunload = function () {
  //     closeWebsocket();
  //   }
  // }

  //将消息显示在网页上
  function setMessage(message) {
    alert(message)
  }

  function setMessageTxt(message) {
    console.log(message);
    if (message != '连接成功'){
      var mObj = JSON.parse(message);
      var div = document.createElement('div');
      div.innerHTML = "<div class='name l'><h2>" + mObj['from_topic'] + "</h2></div>" +
              "<div class='content w l'>" + mObj['content'] + "</div>"
      div.setAttribute("class", "from_info")
      document.getElementById('index').appendChild(div)
    }

  }

  // 发送消息
  function sendMessage() {
    //1代表正在连接
    if (1 == websocket.readyState) {
      var message = document.getElementById('send_content').value;
      var div = document.createElement('div')
      div.innerHTML = "<div class='name r rcontent'><h2> 我 </h2></div>" +
              "<div class='content w r'>" + message + "</div>"
      div.setAttribute("class", "send_info")
      document.getElementById('index').appendChild(div)
      ruser = "客服";
      message = "{'content':'" + message + "','to_topic':'" + ruser + "'}"
      websocket.send(message);
    } else {
      alert("websocket未连接");
    }
    document.getElementById('send_content').value = "";
    document.getElementById('send_content').focus();
  }

  //弹出弹出层
  function Runreply() {
    //判断是否是首次加载
    if(flag==1){
      //开启websocket
      username = "游客";
      if (username != "") {
        //当前浏览前是否支持websocket
        if ("WebSocket" in window) {
          websocket = new ReconnectingWebSocket("ws://localhost:8080/send/" + username);
          websocket.reconnectInterval = 8000 //每8s进行一次重连，默认是每秒
        } else if ('MozWebSocket' in window) {
          websocket = new MozWebSocket("ws://localhost:8080/send/" + username);

        } else {
          //低版本
          websocket = new SockJS("http://localhost:8080/sockjs/send/" + username);
        }
      }
      websocket.onmessage = function (event) {
        // setMessage(event.data);
        setMessageTxt(event.data)

      }

      websocket.onerror = function (event) {
        setMessage("连接异常，正在重连中...");
      }

      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = function () {
        closeWebsocket();
      }
      flag=2;
    }else {

    }
    //弹出弹出层
    var layer = layui.layer;
    layer.open({
      title: '在线聊天',
      type: 1,
      area: ['600px', '480px'],
      shade: 0.3,
      shadeClose: true, //点击遮罩关闭
      content: $('#reply'),
      end:function () {
        $('#reply').css("display","none");
        //3代表已经关闭
        // if (3 != websocket.readyState) {
        //   websocket.close();
        // } else {
        //   alert("websocket之前已经关闭");
        // }
      }
    });
    $(".layui-layer-title").css("background-color","rgb(27,107,188)");
    $(".layui-layer-title").css("color","azure");
    $(".layui-layer-title").css("height","40px");
  }
</script>
</body>
</html>